import React, {FC, useCallback, useMemo, useRef, useState} from "react";
import {Spin} from "antd";
import "./css/ArchivePage.less";
import {Panel, PanelGroup} from "react-resizable-panels";
import CTable from "../../global/table/CTable.tsx";
import DetailsContent from "../../main/content/DetailsContent.tsx";
import {treeMap} from "../../utils";

interface ArchivePageProps {
    rowKey: string,
    viewName: string,
    isLazyData: boolean,
    isTreeTable: boolean,
    tableApi: any
}

const ArchivePage: FC<ArchivePageProps> = (props) => {
    const cTable = useRef();

    const [loading, setLoading] = useState(false),
        [selectRow, setSelectRow] = useState(null);

    const getLeftWidth = useCallback((num) => {
        return num / window.innerWidth * 100;
    }, []);

    const handleSelect = useCallback((selectRows) => {
        if (selectRows.length) {
            let node = selectRows[0];
            setSelectRow(node)
        }
    }, [])

    const renderArchivePageTree = useMemo(() => {
        const {rowKey = "id", isLazyData, isTreeTable, tableApi = {}, viewName} = props;
        const size = getLeftWidth(250);
        const tableHeight = document.querySelector('.sf_core_main_layout_content_main_content').offsetHeight;
        return (
            <Panel defaultSize={size} minSize={size} className="sf_core_archive_page_tree">
                <CTable
                    init={cTable}
                    rowKey={rowKey}
                    isLazyData={isLazyData}
                    isTreeTable={isTreeTable}
                    isShowHeader={false}
                    tableApi={tableApi}
                    view={viewName}
                    height={tableHeight}
                    hasCheckbox={false}
                    isSideBar={false}
                    headerHeight={0}
                    onSelectChange={handleSelect}
                    dataSourceFilter={(data: any) => {
                        return treeMap(data, (children, item, parent) => {
                            let newChildren = children
                            if (!children.length) {
                                const projectCode = parent.name;
                                const prodCode = item.name
                                newChildren = [
                                    {
                                        id: projectCode + "::" + prodCode + "::" + "unit",
                                        name: "最小作业单元",
                                        projectCode,
                                        prodCode,
                                        typeId: "ArchiveUnit"
                                    },
                                    {
                                        id: projectCode + "::" + prodCode + "::" + "drawing",
                                        name: "图纸",
                                        projectCode,
                                        prodCode,
                                        typeId: "ArchiveDrawing"
                                    },
                                    {
                                        id: projectCode + "::" + prodCode + "::" + "process",
                                        name: "工艺文件",
                                        projectCode,
                                        prodCode,
                                        typeId: "ArchiveProcess"
                                    }
                                ]
                            }
                            return {
                                ...item,
                                children: newChildren
                            }
                        })
                    }}
                    isRowSelectable={({data}) => {
                        return data.typeId
                    }}
                />
            </Panel>
        )
    }, [props]);

    const renderArchivePageTable = useMemo(() => {
        if (!selectRow) {
            return null
        }
        const prop = {
            key: selectRow.id,
            objectId: selectRow.id,
            objectTypeId: selectRow.typeId,
            objectStatusId: 0,
            ds: {
                row: selectRow
            },
            splitPage: {}
        }
        return (
            <DetailsContent {...prop}/>
        )
    }, [selectRow]);


    const renderArchivePage = useMemo(() => {
        return (
            <Spin spinning={loading} wrapperClassName="sf_core_archive_page">
                <PanelGroup direction="horizontal">
                    {renderArchivePageTree}
                    <Panel className="sf_core_archive_page_table">
                        {renderArchivePageTable}
                    </Panel>
                </PanelGroup>
            </Spin>
        )
    }, [props, loading, selectRow]);

    return (renderArchivePage);
};

export default React.memo(ArchivePage);